<template>
  <div id="simba-sketch-rule" class="simba-sketch-rule">
    <sketch-rule
      v-if="sketchRuleReDraw"
      :thick="thick"
      :width="getCanvasBox().width"
      :height="getCanvasBox().height"
      v-model:scale="chartEditStore.editCanvas.scale"
      :lines="lines"
      :startY="startY"
      :startX="startX"
      :palette="paletteStyle"
    >
    </sketch-rule>
    <div ref="$app" class="edit-screen" @scroll="handleScroll">
      <div
        ref="$container"
        class="edit-screen-wrapper"
        :style="{ width: wrapperWidth, height: wrapperHeight }"
      >
        <div
          ref="refSketchRuleBox"
          class="canvas"
          :style="{
            marginLeft: '-' + (getCanvasBox().width / 2 - 25) + 'px',
          }"
        > 
          <slot></slot>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { reactive, computed, ref, watch, onMounted } from "vue";
import SketchRule from "vue3-sketch-ruler";
import { throttle } from "lodash";
import { useChartEditStore } from "@/store/modules/chartEditStore/chartEditStore";

const chartEditStore = useChartEditStore();
const lines = reactive({ h: [], v: [] });
const $app = ref<HTMLElement>();
const $container = ref<HTMLElement>();
const refSketchRuleBox = ref<HTMLElement>();
const thick = 20;
const startX = ref(0);
const startY = ref(0);
const sketchRuleReDraw = ref(true);

const wrapperWidth = computed(() => `${window.innerWidth * 2}px`);
const wrapperHeight = computed(() => `${chartEditStore.editCanvasConfig.height * 2}px`);
const paletteStyle = computed(() => ({
  bgColor: "#18181c",
  longfgColor: "#4d4d4d",
  shortfgColor: "#4d4d4d",
  fontColor: "#4d4d4d",
  shadowColor: "#18181c",
  borderColor: "#18181c",
  cornerActiveColor: "#18181c",
}));
// * 获取画布的宽高
const getCanvasBox = () => {
  // const layoutDom = chartEditStore.editCanvas.editLayoutDom;
  // ! 此处需要获取到实时编辑器的宽高
  const layoutDom = document.getElementById("simba-sketch-rule");
  if (layoutDom) {
    // 此处减去滚动条的宽度和高度
    const scrollW = 20;
    return {
      height: layoutDom.clientHeight - scrollW,
      width: layoutDom.clientWidth - scrollW,
    };
  }
  return {
    width: chartEditStore.editCanvasConfig.width,
    height: chartEditStore.editCanvasConfig.height,
  };
};
const handleScroll = (e) => {
  if (!$app.value) return;
  const scale = chartEditStore.editCanvas.scale;
  const screensRect = $app.value.getBoundingClientRect();
  const canvasRect = refSketchRuleBox.value.getBoundingClientRect();
  // 标尺开始的刻度
  startX.value = (screensRect.left + thick - canvasRect.left) / scale;
  startY.value = (screensRect.top + thick - canvasRect.top) / scale;
};
// * 设置画布的中心位置
const setCanvasPosCenter = () => {
  if (!$container.value) return;
  const { width: containerWidth, height: containerHeight } =
    $container.value.getBoundingClientRect();
  const { width, height } = getCanvasBox();
  console.log($container.value)
  console.log(containerWidth, width)
  $app.value.scrollLeft = containerWidth / 2 - width / 2 ;
  $app.value.scrollTop = containerHeight / 2 - height / 2 ;
};
// * 重绘标尺
const reDraw = throttle(() => {
  sketchRuleReDraw.value = false;
  setTimeout(() => {
    sketchRuleReDraw.value = true;
  }, 10);
}, 20);

onMounted(() => {
  if ($app.value) {
    setCanvasPosCenter()
  }
});
watch(
  () => chartEditStore.editCanvas.scale,
  (newScale) => {
    handleScroll();
    setTimeout(() => {
      setCanvasPosCenter();
      reDraw()
    }, 400);
  }
);
window.onKeySpacePressHold = (isHold: boolean) => {
  // isPressSpace.value = isHold
};
</script>
<style lang="scss" scoped>
@include simba("sketch-rule") {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
  .edit-screen {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    overflow: auto;
    user-select: none;
    padding-bottom: 0px;

    /* firefox */
    scrollbar-color: rgba(144, 146, 152, 0.3) transparent;
    scrollbar-width: thin;

    /* chrome */
    &::-webkit-scrollbar,
    &::-webkit-scrollbar-track-piece {
      background-color: transparent;
    }

    &::-webkit-scrollbar {
      width: 0px;
    }

    &::-webkit-scrollbar-thumb {
      border-radius: 5px;
      background-color: rgba(144, 146, 152, 0.3);
    }
    .edit-screen-wrapper {
      position: absolute;
      top: 0;
      left: 0;
      .canvas {
        position: absolute;
        top: 50%;
        left: 50%;
        transform-origin: 50% 0;
        transform: translateY(-50%);
        &:hover {
          // cursor: v-bind('cursorStyle');
        }

        &:active {
          cursor: crosshair;
        }
      }
    }
  }
}
</style>


<style>
/* 使用 SCSS 会报错，直接使用最基础的 CSS 进行修改，
此库有计划 Vue3 版本，但是开发的时候还没发布 */
#mb-ruler {
  top: 0;
  left: 0;
}

/* 横线 */
#mb-ruler .v-container .lines .line {
  /* 最大缩放 200% */
  width: 200vw !important;
  border-top: 1px dashed v-bind('themeColor') !important;
}

#mb-ruler .v-container .indicator {
  border-bottom: 1px dashed v-bind('themeColor') !important;
}

/* 竖线 */
#mb-ruler .h-container .lines .line {
  /* 最大缩放 200% */
  height: 200vh !important;
  border-left: 1px dashed v-bind('themeColor') !important;
}

#mb-ruler .h-container .indicator {
  border-left: 1px dashed v-bind('themeColor') !important;
}

/* 坐标数值背景颜色 */
#mb-ruler .indicator .value {
  background-color: rgba(0, 0, 0, 0);
}

/* 删除按钮 */
#mb-ruler .line .del {
  padding: 0;
  color: v-bind('themeColor');
  font-size: 26px;
  font-weight: bolder;
}

#mb-ruler .corner {
  border-width: 0 !important;
}
</style>